<template>
  <el-container >
    <div class="catelist">
      <div class="header">
        <div class="cname">分类名称</div>
        <div class="cpic">分类图片</div>
        <div class="cbutton">操作</div>
      </div>
      <div class="cate_con">

        <div class="cate_sin" v-for="(item,i) in list" :key="i">
          <div class="cate_name">
            <div class="cname">{{item.name}}</div>
            <div class="cpic">
              <vimage
              style="width: 40px; height: 40px;border:1px solid #E4E7ED;"
              :src="item.img"
              fit="fit"></vimage>
            </div>
            <div class="cbutton">
              <el-button :key="rk" :type="item.checked ? 'primary' : ''" size="medium" @click="selectThis(item)">选择</el-button>
            </div>
          </div>
          <span v-if="item.children.length > 0">
          <div class="lv_next_lv2" v-for="(item2,l) in item.children" :key="l">
            <div class="cate_name">
              <div class="cname"><span class="bkl"></span>{{item2.name}}</div>
              <div class="cpic">
                <vimage
                style="width: 40px; height: 40px;border:1px solid #E4E7ED;"
                :src="item2.img"
                fit="fit"></vimage>
              </div>
              <div class="cbutton">
                <el-button :key="rk" :type="item2.checked ? 'primary' : ''" size="medium" @click="selectThis(item2)">选择</el-button>
              </div>
            </div>
            <span v-if="item2.children.length > 0">
            <div class="lv_next_lv3" v-for="(item3,k) in item2.children" :key="k">
              <div class="cate_name">
                <div class="cname"><span class="bkl"></span>{{item3.name}}</div>
                <div class="cpic">
                  <vimage
                  style="width: 40px; height: 40px;border:1px solid #E4E7ED;"
                  :src="item3.img"
                  fit="fit"></vimage>
                </div>
                <div class="cbutton">
                  <el-button :key="rk" :type="item3.checked ? 'primary' : ''" size="medium" @click="selectThis(item3)">选择</el-button>
                </div>
              </div>
            </div>
            </span>
          </div>
          </span>
        </div>

      </div>
      <div class="dialog-footer">
        <el-button @click="outData('close')">取消</el-button>
        <el-button type="primary" @click="outData">确定</el-button>
      </div>
     <!-- <div class="table_footer" >
        <el-button type="primary" @click="outData">选择数据</el-button>
      </div> -->
    </div>
  </el-container>
</template>

<script>
import {
  getCateList
} from '@/api/shop/dndlist';
export default {
  data() {
    return {
      isLoading:false,
      list:[],
      selectItem:{},
      rk:1
    }
  },
  props: {
    data: {
      type: Array,
      default: function(){
        return [];
      }
    },
    limit:{
      type:Number,
      default:0
    },
    cate:{
      type:String,
      default:''
    }
  },
  created(){
  },
  mounted(){
    this.getList();
  },
  methods: {
    //选择单项
    selectThis(item){
      //重置数组选中项
      this.list.forEach(e => {
        e.checked = false;
        if(e.children.length > 0){
          e.children.forEach(x => {
            x.checked = false;
            if(x.children.length > 0){
              x.children.forEach(_ => {
                _.checked = false;
              });
            };
          });
        };
      });
      item.checked = true;
      this.selectItem = item;
      this.rk++;
    },
    //获取全部分类数据
    getList(){
      this.isLoading = true;
      getCateList().then(res => {
        this.isLoading = false;
        this.list = res.msg.data;
        for(let i=0,l=this.list.length;i<l;i++){
          this.list[i].c_id=this.list[i].id
          if(this.list[i].id == this.cate){
            this.list[i].checked = true;

            // break;
          };
          //循环二级
          if(this.list[i].children.length > 0){
            for(let a=0,b=this.list[i].children.length;a<b;a++){
              this.list[i].children[a].c_id=this.list[i].id+'->'+this.list[i].children[a].id

              if(this.list[i].children[a].id == this.cate){
                this.list[i].children[a].checked = true;
                // break;
              };
              //循环三级
              if(this.list[i].children[a].children.length > 0){
                for(let x=0,y=this.list[i].children[a].children.length;x<y;x++){
                  this.list[i].children[a].children[x].c_id=this.list[i].id+'->'+this.list[i].children[a].id+'->'+ this.list[i].children[a].children[x].id

                  if(this.list[i].children[a].children[x].id == this.cate){
                    this.list[i].children[a].children[x].checked = true;
                    // break;
                  };
                };
              };
            };
          }
        }
        console.log(this.list)
      });
    },
    //确定选择数据
    outData(){
      this.$emit('outData',this.selectItem);
    }
  }
}
</script>

<style scoped lang="scss">
.catelist{
  width: 100%;


  .header{
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: flex;
    font-weight: 700;

    .cname{
      flex: 1;
      padding-left: 10px;
    }

    .cpic{
      width: 150px;
      display: flex;
      justify-content: center;
    }

    .cbutton{
      width: 120px;
    }
  }

  .cate_con{
    max-height: 500px;
    overflow-y:auto;
    padding-bottom: 10px;

    .cate_sin{
      width: 100%;
      margin-top: 10px;
      border:1px solid #DCDFE6;

      .cate_name{
        width: 100%;
        height: 60px;
        line-height: 60px;
        display: flex;
        background-color: #f4f6f8;

        .cname{
          flex: 1;
          padding-left: 10px;
          // display: flex;
          // align-items: center;

          .bkl{
            display: inline-block;
            border-left: 1px solid #DCDFE6;
            border-bottom: 1px solid #DCDFE6;
            width: 20px;
            height: 20px;
            margin: 0 30px 3px 20px;
          }
        }

        .cpic{
          width: 150px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .cbutton{
          width: 120px;
        }
      }

      .lv_next_lv2{
        .cate_name{
          background: #fafdff;
          border-top: 1px solid #DCDFE6;
        }

        .lv_next_lv3{
          .cate_name{
            background: #fffdf9;
            border-top: 1px solid #DCDFE6;

            .cname{
              .bkl{
                margin-left:80px;
              }
            }
          }
        }
      }
    }
  }


}
</style>
